<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
    </div>

    <script>
        // 生命周期函数就是vue实例在某一个时间点自动执行的函数
        var vm = new Vue({
            el: '#app',
            data: {
                message: "helloworld"
            },

            // 在初始化事件和生命周期后，会自动调用beforeCreate函数
            beforeCreate: function () {
                console.log("beforeCreate");
            },

            // 处理了外部注入和双向绑定后，自动调用created函数
            created: function () {
                console.log("created")
            },

            // 检测是否有template选项，如果没有，就会将el整体的内容当做他的模板进行渲染
            // 如果有template选项（子组件），就会按照模板进行渲染
            // 页面渲染之前会自动执行beforeMount
            beforeMount: function () {
                // console.log(this.$el);   //<div id="app"></div>
                console.log("beforemount");
            },

            // 将el挂载自实例上，自动执行mouted
            mounted: function () {
                // console.log(this.$el);  //<div id="app">helloworld</div>
                console.log("mounted");
            },

            // 当数据发生改变，还没重新渲染之前
            // 终端输入vm.message="zzj"
            beforeUpdate: function () {
                console.log("beforeUpdate");
            },
            // 当数据发生改变，数据重新渲染之后
            updated: function () {
                console.log("updated");
            },

            // 当组件被销毁时，会执行
            // 终端执行vm.$destroy()
            beforeDestroy: function () {
                console.log("deforeDestroy");
            },
            // 当组件被完全销毁时，会被执行
            destroyed: function () {
                console.log("destroyed");
            },
        })
    </script>
</body>

</html>